<template>
  <div class="index">
    <van-nav-bar fixed placeholder>
      <template #title>
        <van-tabs v-model="activeName" @click="showTable">
          <van-tab title="关注" name="a"></van-tab>
          <van-tab title="发现" name="b"></van-tab>
          <van-tab title="附近" name="c"></van-tab>
        </van-tabs>
      </template>
      <template #right>
        <van-icon name="search" size="18" @click="search" />
      </template>
    </van-nav-bar>
    <van-pull-refresh v-model="isLoading" success-text="刷新成功" @refresh="onRefresh">
      <div style="height:99.9vh;overflow-y: auto;">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <div>
            <van-row>
              <van-col span="12" v-for="(item, i) in list" :key="i">
                <van-image width="12rem" fit="cover" :src="'data:image/png;base64,' + item.photo"
                  @click="contentPage(item.id)" />
                <van-field v-model="item.content" rows="1" autosize type="textarea" />

                <van-row>
                  <van-col span="8">
                    <van-image class="photo" round width="1.6rem" height="1.6rem"
                      :src="'data:image/png;base64,' + item.userPhoto" @click="seeOne(item.userId)" />
                  </van-col>
                  <van-col span="8">{{ item.username }}</van-col>
                  <van-col span="8"><van-icon name="like-o" :badge="item.good == 0 ? '' : item.good"
                      @click="good(item)" /></van-col>
                </van-row>
              </van-col>
            </van-row>
          </div>
        </van-list>
      </div>

    </van-pull-refresh>

    <van-tabbar v-model="active" fixed @change="onChange">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="tv-o">直播</van-tabbar-item>
      <van-uploader :after-read="afterRead">
        <van-tabbar-item icon="plus">搭一搭</van-tabbar-item>
      </van-uploader>
      <van-tabbar-item icon="chat-o" :dot="dot">消息

      </van-tabbar-item>
      <van-tabbar-item icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      activeName: 'b',
      list: [],
      active: 0,
      isLoading: false,
      finished: false,
      loading: false,
      pageNum: 1,
      pageSize: 10,
      messageCount: '',
      dot: false,
    }
  },
  created: function () {
    const tel = window.localStorage.getItem("dazi_")
    this.$axios.get('http://localhost:9090/dazi/chat/get?type=桌面&tel=' + tel)
      .then(res => {
        this.dot = res.data;
      })
    this.pageNum = 1
    this.$axios.get('http://localhost:9090/dazi/content/list?pageNum=' + this.pageNum + "&pageSize=" + this.pageSize)
      .then(res => {
        this.list = res.data;
      })

    if (tel) {

    }
  },
  methods: {

    good(item) {
      item.good += 1
      this.$axios.get('http://localhost:9090/dazi/content/good?id=' + item.id + "&good=" + item.good)
        .then(res => { })
    },
    //文件上传完成回调函数
    afterRead(file) {
      this.$router.push({ path: '/say', query: { file: file } })
    },
    contentPage(id) {
      this.$router.push({ path: '/contentPage', query: { contentId: id } })
    },
    seeOne(userId) {
      this.$router.push({ path: '/seeOne', query: { userId: userId } })
    },
    //上拉刷新
    onLoad() {
      console.log(12)
      this.pageNum = this.pageNum + 1
      this.loading = true
      this.$axios.get('http://localhost:9090/dazi/content/list?pageNum=' + (this.pageNum) + "&pageSize=" + this.pageSize)
        .then(res => {
          if (!res.data.length == 0) {
            // 数据全部加载完成
            this.finished = true;
          } else {
            this.list = this.list.concat(res.data);
          }

          // 加载状态结束
          this.loading = false;

        })

    },
    // 下拉
    onRefresh() {
      this.pageNum = 1
      this.$axios.get('http://localhost:9090/dazi/content/list')
        .then(res => {
          this.list = []
          this.list = res.data;
        })

      this.isLoading = false;
    },
    search: function () {
      this.$router.push("/search")
    },
    showTable: function (name, table) {
      if (name == 'a') {
        this.$router.push("/focus")
      }

      if (name == 'b') {
        this.$router.push("/")
      }

      if (name == 'c') {
        this.$router.push("/nearby")
      }
    },
    onChange(index) {

      if (index == 1) {
        this.$router.push("/tv_list");
      }
      const data = window.localStorage.getItem('dazi_')
      if (index == 3) {

        if (data) {
          this.$router.push("/chatList");
        } else {
          this.$router.push("/login");
        }

      }

      if (index == 4) {

        if (data) {
          this.$router.push("/me");
        } else {
          this.$router.push("/login");
        }

      }

    },
  }
}


</script> 


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.van-col {
  padding-left: 1.5px;
  margin: 6px 0;
}

.content {
  padding: 10px 6px;
  /* font-size: 1.2rem; */
}

.photo {
  padding: 0 6px;

}

.van-icon {
  margin-top: 5px;
}
</style>
